# 网页渲染模式

模式	生成时机	动态性	适用场景
CSR	客户端运行时	高	交互复杂，SEO 无要求
SSR	服务端实时渲染	中（首屏静态）	SEO 要求高，首屏需快
SSG	构建时预生成	无	纯静态内容（文档、博客）
ISR	构建时 + 按需更新	部分动态	大部分静态，小部分动态内容

核心差异：

SSR 实时渲染，SSG 预生成，ISR 按需更新。
SPA 注重交互，MPA 注重内容。
CSR 与 SSR 互补，SSG 与 ISR 侧重静态优化。

# 一、SPA/MPA

特性	SPA	MPA
页面数量	单页	多页
路由方式	前端路由（如 React/Vue Router）	后端路由（页面跳转需重载）
首屏速度	较慢（需加载 JS 后渲染）	较快（直接返回 HTML）
SEO 友好性	不友好（依赖 JS 渲染内容）	友好（完整 HTML 内容）
页面切换速度	快（局部更新）	慢（整页重载）
适用场景	交互复杂的前端应用	内容为主的静态网站

# 二、客户端渲染（CSR）

原理：浏览器请求空 HTML 和 JS，由 JS 动态生成内容。
流程：请求 HTML → 加载 JS → 渲染页面 → 后续交互通过 API 获取数据。
特点：
- ✅ 前后端分离，切换页面快。
- ❌ 首屏慢，SEO 差。
应用：Vue/React 默认模式，适合后台管理系统等对 SEO 无要求的场景。

# 三、服务端渲染（SSR）

原理：服务器生成完整 HTML 返回，客户端注水（Hydrate）为可交互应用。
流程：请求 → 服务端获取数据并渲染 HTML → 返回 → 客户端注水。
特点：
- ✅ 首屏快，SEO 友好。
- ❌ 服务器压力大，代码复杂度高（需兼容两端环境）。
关键技术：
- 同构渲染：同一份代码在服务端和客户端运行。
- 脱水（Dehydrate）：服务端生成静态 HTML。
- 注水（Hydrate）：客户端激活交互性。
应用：需要 SEO 且首屏速度要求高的场景（如电商首页）。

# 四、静态站点生成（SSG）

原理：构建时预生成静态 HTML，直接托管到 CDN。
流程：构建时生成页面 → 用户访问时返回预渲染 HTML → 注水为 SPA。
特点：
- ✅ 性能极高（CDN 缓存），SEO 友好，安全性高。
- ❌ 仅适合静态内容（如博客、文档）。
应用：内容不频繁更新的静态站点（如博客、帮助文档）。

# 五、增量静态再生（ISR）

原理：结合 SSG 与 SSR，预生成静态页面，按需增量更新。
流程：
- 首次访问未缓存页面 → 返回 Fallback 页面（CSR 渲染） → 后台生成新页面并缓存。
- 后续访问 → 直接返回缓存（过期则异步更新）。
特点：
- ✅ 动态与静态结合，减轻服务器压力。
- ❌ 次要内容可能触发 CSR，过期缓存需刷新生效。
应用：部分内容需动态更新的场景（如博客评论区、最新文章列表）。

# Reference